<template>
  <div class="confirm-dialog">
    <el-dialog
      :title="title"
      :visible.sync="confirmDialogShow"
      width="42%"
      :before-close="handleClose"
      custom-class="dialog-box"
    >
      <!-- <div class="meeting-box" v-if="type != 1">
        <div>
          <span class="table-header">任务名称</span>
          <span class="table-body">{{ infoData.taskName }}</span>
        </div>
        <div>
          <span class="table-header">评审时间</span>
          <span class="table-body">{{
            infoData.reviewTimeStart + "~" + infoData.reviewTimeEnd
          }}</span>
        </div>
        <div>
          <span class="table-header">评审地点</span>
          <span class="table-body">{{ infoData.reviewAddress }}</span>
        </div>
      </div> -->
      <div class="meeting-box" v-if="type == 1">
        <div>
          <span class="table-header">任务名称</span>
          <span class="table-body">{{ delData.taskName }}</span>
        </div>
        <div>
          <span class="table-header">任务节点</span>
          <span class="table-body">{{ delData.node }}</span>
        </div>
      </div>
       <el-descriptions label-width="140px" :column="1" size="medium" border v-if="type != 1">
          <el-descriptions-item label="任务名称" label-class-name="descriptions-item-label">
              {{infoData.taskName}}
          </el-descriptions-item>
          <!-- <el-descriptions-item label="评审时间" label-class-name="descriptions-item-label">
              {{infoData.reviewTimeStart + ' ~ ' + infoData.reviewTimeEnd}}
          </el-descriptions-item> -->
          <el-descriptions-item label="评审地点" label-class-name="descriptions-item-label">
              {{infoData.reviewAddress}}
          </el-descriptions-item>
      </el-descriptions>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="是否接收任务"
          prop="receiveStatus"
          v-if="type != 1"
        >
          <el-radio-group v-model="ruleForm.receiveStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="拒绝说明"
          prop="refuseReason"
          v-if="ruleForm.receiveStatus == 2"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.refuseReason"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请理由" prop="applyReason" v-if="type == 1">
          <el-input
            type="textarea"
            v-model="ruleForm.applyReason"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUpdata,
  getDetailByTask,
  getExtReceiveInfo,
  getApplyCancel,
} from "@/api/manage/manage";
export default {
  name: "confirmDialog",
  props: {
    confirmDialogShow: {
      type: Boolean,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    reviewTaskId: {
      type: String,
      default: "",
    },
    expertId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      rules: {
        receiveStatus: [
          { required: true, message: "请选择是否接收任务", trigger: "change" },
        ],
        refuseReason: [
          { required: true, message: "请输入拒绝说明", trigger: "blur" },
        ],
        applyReason: [
          { required: true, message: "请输入申请理由", trigger: "blur" },
        ],
      },
      ruleForm: {
        receiveStatus: "",
        refuseReason: "",
      },
      infoData: {}, //详情信息
      title: "确认任务", //默认标题
      delData: {}, //申请取消信息
    };
  },
  watch: {
    confirmDialogShow(val) {
      if (val) {
        console.log(this.type, this.expertId);
        if (this.type == 1) {
          this.title = "申请取消";
          getExtReceiveInfo(this.reviewTaskId, this.expertId).then((res) => {
            if (res.code == 200) {
              this.delData = res.data;
            }
            console.log(res);
          });
        } else {
          getDetailByTask(this.reviewTaskId).then((res) => {
            this.infoData = res;
            console.log(res);
          });
        }
      }
    },
  },
  methods: {
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("changShow", "false");
    },
    submit() {
      this.ruleForm.reviewTaskId = this.reviewTaskId;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.type == 1) {
            getApplyCancel(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.$refs.ruleForm.resetFields();
                this.$emit("changShow", "false");
              }
            });
          } else {
            getUpdata(this.ruleForm).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.$refs.ruleForm.resetFields();
                this.$emit("changShow", "false");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.confirm-dialog .dialog-box .el-form-item .el-textarea__inner {
  width: 100%;
}
.confirm-dialog .dialog-box .descriptions-item-label{
  width: 140px;
  text-align: center;
}
.confirm-dialog {
  .meeting-box {
    width: 572px;
    margin-bottom: 12px;
    & > div {
      display: flex;
      align-items: center;
    }
    & > :not(:first-child) {
      span {
        border-top: none;
      }
    }
    .table-header {
      display: inline-block;
      width: 140px;
      height: 48px;
      background: #fafafa;
      line-height: 48px;
      text-align: center;
      border: 1px solid #ebebeb;
    }
    .table-body {
      display: inline-block;
      width: 432px;
      height: 48px;
      border: 1px solid #ebebeb;
      border-left: 0;
      text-indent: 24px;
      line-height: 48px;
    }
  }
}
</style>
